<script>
/*
var is_mobile=0;
var agent = navigator.userAgent;
var rate ="1.0";
   if (agent.match(/iPhone/) != null || agent.match(/iPod/) != null) {
		rate="1.0";
   }else if(agent.match(/Mobile/)){
		rate="0.65";
   is_mobile =1;
   }

   document.write('<meta name="viewport" content="minimum-scale='+rate+',maximum-scale='+rate+',initial-scale='+rate+',user-scalable=no" />');
   */
</script>
<style type="text/css">
	body,a,ul,li,table,tr,td{
		padding:0;
		margin:0;
		text-decoration:none;
		font-size:20px;
		list-style:none;
	}
	div,ul,li{
		border:0;
	}
	a{
		color:#fff;
		font-weight:bold;
	}
	a:link,a:visited{
		color:#fff;
		font-weight:bold;
	}

	div,span{
		color:#333;
	}
	
	#main header, #main footer{
		position:fixed;
		z-index:100;
		width:100%;
		background-color:#c00;
		height:50px;
		line-height:50px;
		vertical-align:bottom;
	}

	#page_title{
		font-weight:bold;
		color:#fff;
		padding-left:20px;
		font-size:2em;
	}

	#main footer{
		position:fixed;
		z-index:100;
		bottom:0px;
		background-color:#333;
		display:none;
	}

	#main header ul li{
		float:left;
	}

	#main footer ul li{
		float:left;
	}
	#main footer ul li a{
		padding-left:10px;
	}

	div#content_area{width:100%;height:100%;} 
	#message_area{
		width:100%;
		padding:10px
		background-color:#fff;
		overflow:hidden;
	} 
	div#area{
		position:fixed;
		z-index:101;
		top:0px;
		z-index:100;
		width:100%;
		height:100%;
	} 
	div.point_area{
		float:left;
		height:100%;
		border:0;
	}
	.page{
		margin:0;
		padding:5px;
		background-color:#fff;
		border:solid 1px #888;
	}

	#message_area table{
		position:relative;
		
	}
	.td_page{
		vertical-align:top;
		position:relative;
		background-color:#888;
		padding:50px 10px 50px 10px;
	}
	#page_count{
		font-wegiht
	}

	.bottom_area{
		text-align:right;
	}

	.scrap_title{
		font-weight:bold;
		
	}




</style>
<script>

	var MOBILE = {};
	$(function(){
		MOBILE = {
			init	: function(){
				console.log("xx");
				var self = this;
				self.UI.init();
				self.VIEWER.init();
			}
		}

		MOBILE.TEMPLATE ={
			user_info	: [
				'<div class="bottom_area">Scrap by <img src="',/**/,'" width="30" height="30" valign="bottom">'+
				'<span class="user_name"> ',/**/,'</span><br />'+
				'<span class="reg_date">',/**/,'</span>'+
				'</div>'
			],
			title		: [
				'<div class="top_area">'+
				'<span class="scrap_title"> ',/**/,'</span><br />'+
				'</div>'
			]
		}

		MOBILE.VIEWER = {
			_contentData	: {},
			_totalContents	: {},

			current_page	: 0,
			type	:	"SCRAP",
			timer	:	0,
			x		:	0,
			i		:	1,
			init	:	function(){
				var self = this;
				self.load();
			},
			load	:	function(){
				var self = this;
				jQuery.ajax({
					url			:	"/paper.php",
					async		:	"true",
					type		:	"post",
					dataType	:	"json",
					data		:	{
						"service" 	: "api_paper_getData",
						"type" 		: self.type,
						"tag" 	: self.tag,
						"status" : self.status
					},
					success		:	function(re){
						if(re.RESULT_SET.flag == "F"){
							alert(re.RESULT_SET.msg);
							return false;
						}
						self._contentData = re.RESPONSE.paper_list;	
						self._totalContents = re.RESPONSE.paper_list.length;
						self.initPage();
						self.appendPage();
					}
				});
			},
			initPage	: function(){
				var self = this;
				MOBILE.UI.$page_count.html("1");
				MOBILE.UI.$total_count.html(self._totalContents);

			},
			appendPage	: function(){
				var self = this;
				//start area
				var data = self._contentData[self.current_page];
				var title = self.type == "SCRAP" ? data.h_tag : self.type;
				title = title.length < 1 ? "UNTITLE" : title;
				if($("#page"+self.current_page).attr("class") == undefined){
					MOBILE.TEMPLATE.user_info[1]=data.m_profile_img;
					MOBILE.TEMPLATE.user_info[3]=data.h_name;
					MOBILE.TEMPLATE.user_info[5]=data.h_reg_date;

					MOBILE.TEMPLATE.title[1]=data.h_title;
					var message = MOBILE.TEMPLATE.title.join("");
					message += data.h_content;
					message += MOBILE.TEMPLATE.user_info.join("");
					if(data.h_type == "PHOTO"){
						message = "<p><img src='"+data.h_file+"' width='100%'></p>"+message;
					}
					MOBILE.UI.$message.append("<td width='100%' id='page"+self.current_page+"' class='td_page'><div style='width:"+(MOBILE.UI.width-34)+"px' class='page'>"+message+"</div></td>");
				}else{
				}
				MOBILE.UI.$page_title.html(title);
				self.x = (MOBILE.UI.width * self.current_page);
			},
			changePage	: function(page){
				var self = this;
				self.current_page = page;
				MOBILE.UI.$header.show();
				MOBILE.UI.$footer.hide();
			
				MOBILE.UI.$page_count.html(page+1);
				self.appendPage();
			},
			nextPage	: function(){
				var self = this;
				if(self.current_page >=self._totalContents){
					return false;	
				}
				self.current_page = self.current_page+1;
				self.changePage(self.current_page);
				self.timer = setInterval(function(){
					if(self.x*-1 < self.i){
						self.i = self.i-30;
						$("#message_area>table").css({
								"top"  : 0+"px",	
								"left" : self.i+"px"
						});
					}else{
						clearInterval(self.timer);
						$("#message_area>table").css({"left" : self.x*-1+"px"});
                        window.scrollTo(20,0);
					}	
				},1)
			},
			prevPage	: function(){
				var self = this;
				if(self.current_page <=0){
					return false;	
				}
				self.current_page = self.current_page-1;
				self.changePage(self.current_page);
				self.timer = setInterval(function(){
					if(self.x*-1 > self.i){
						self.i = self.i+30;
						$("#message_area>table").css({
								"top"  : 0+"px",	
								"left" : self.i+"px"
						});
					}else{
						clearInterval(self.timer);

						$("#message_area>table")
                        .css({"left" : self.x*-1+"px"});
                        window.scrollTo(20,0);
					}	
				},1)
			}
		
		}


		MOBILE.UI = {
			$header	:	$("#header"),
			$footer :	$("#footer"),
			$page_title :	$("#page_title"),
			$page_count :	$("#page_count"),
			$total_count :	$("#total_count"),
			$content_area :	$("#content_area"),
			$message :	$("#message"),

			width	: 0,

			move_trigger : false,
			init	: function(){
				var self = this;
				self.bind();
				self.resize();
				$(window).resize(function(){self.resize()});
			},
			resize	: function(){
				var self = this;
				self.width = window.screen.availWidth;
				$("#area").css({
					"height"	: (window.screen.availHeight)+"px"
				})
				$("#message_area").css({
					"width"		: self.width + "px"
				});
			},
			bind	: function(){
				var self = this;
				$("#center").unbind().bind("click",function(){
						if(self.$footer.css("display") == "none"){
							self.$footer.slideDown();
							self.$header.slideDown();
						}else{
							self.$footer.slideUp();
							self.$header.slideUp();
						}
					});
				$("#left").unbind().bind("click",function(){
						MOBILE.VIEWER.prevPage();
					});
				$("#right").unbind().bind("click",function(){
						MOBILE.VIEWER.nextPage();
					});
				/*
				$("#area").unbind().bind("swipeleft",function(){
						//alert(event.layerX);
					MOBILE.VIEWER.nextPage();
					console.log($(".page").length);
					$("#message_area>table").css({
						"left" : ($(".page").length*1000)+"px"
					});
				});
				*/
			/*	
				$("#area").unbind().bind("mousedown",function(e){
							self.startx = event.layerX;
							self.move_trigger=true;
				})	
				.bind("mouseup",function(e){
							self.move_trigger=false;
				})		
				.bind("mouseout",function(e){
							self.move_trigger=false;
				})	
				.bind("mousemove",function(e){
							if(self.move_trigger){
								var x = self.startx + event.layerX;
								console.log(x);
								$("div#message_area")
									.scrollLeft(x);
							}
				});	
			*/	
	
			},
			move	: function(){
				var self = this;
				console.log(event.layerX);
			}
			
		}

		MOBILE.VIEWER.type = "<?=$result["type"]?>";
		MOBILE.VIEWER.tag = "<?=$result["tag"]?>";
		MOBILE.init();
	});
</script>
<div id="main">

<header id="header">
	<ul style="width:100%;">
	<li style="width:80%;text-align:left;">
	<span id="page_title">TITLE</span>
	</li>
	<li style="text-align:right;width:20%;">
		#<span id="page_count">11</span>/<span id="total_count">11</span>
	</li>
	</ul>
</header>
<div id="content_area">
	<div id="area">
		<div id="left" class="point_area" style="width:20%"></div>
		<div id="center" class="point_area" style="width:60%"></div>
		<div id="right" class="point_area" style="width:20%"></div>
	</div>
	<div id="message_area">
	<table>
	<tr id="message">
	</tr>
	</table>
	</div>
</div>
<footer id="footer">
	<ul style="width:100%;">
			<li style="width:70%">
			<a href="/mobile.php">HOME</a>
			</li>
			<li style="text-align:right;width:20%;">
				<a href=""><span style="font-size:20px;">▼</span></a>
			</li>
	</ul>
</footer>
</div>

